import React, { Fragment } from 'react';
import { Layout, Menu } from 'antd';
import { withRouter,Link } from 'react-router-dom';
import styles from './styles.module.less';
import { connect } from 'react-redux';
import {ExportOutlined,UnorderedListOutlined,RightOutlined} from '@ant-design/icons'


const { Sider } = Layout;
const { SubMenu } = Menu;
class NewSider extends React.Component {
    getMenu(backImgList){
      return (
          <Fragment>
            <Menu.Item disabled icon={<UnorderedListOutlined />}>热点图列表</Menu.Item>
            {backImgList.map((item,index)=> {
            //   return <Menu.Item key={index}>
            //     <Link to={'/FSM/'+ item.backImgVO1.id}>{item.backImgVO1.name}</Link>
            //   </Menu.Item>
            console.log(item)
            return (item.backImgVO1.name === 'UT')? <Menu.Item key={index}>
            <Link to={'/UT/'+ item.backImgVO1.id}>{item.backImgVO1.name}</Link>
          </Menu.Item> : <Menu.Item key={index}>
                <Link to={'/FSM/'+ item.backImgVO1.id}>{item.backImgVO1.name}</Link>
              </Menu.Item>
            })}
            {/* <Menu.Item key="/FSM/653xfjvb" icon={<RightOutlined />}>
                普光#2线
            </Menu.Item>
            <Menu.Item key="/FSM/6j88573b"icon={<RightOutlined />}>
                D403+M503
            </Menu.Item>
            <Menu.Item key="/FSM/dfxg055c"icon={<RightOutlined />}>
                普光#1线
            </Menu.Item>
            <Menu.Item key="/FSM/us9qs8uv"icon={<RightOutlined />}>
                304~305站间管道
            </Menu.Item> */}
        </Fragment>
      )
    }
    menuChange = (e) => {
        this.props.setIndex({index:e.key})
    }
    
    
    render() {
        return (
            <Sider width="200" theme="light">
                <div className={ styles.logoContent }>
                    {/* 四川大学 */}
                    <div className={styles.logo}></div>
                    {/* <a >
                      <img className={ styles.logo } src={logo} />
                    </a> */}
                </div>
                <Menu
                    onClick={ this.menuChange }
                    mode="inline"
                    // theme="dark"
                >
                    { this.getMenu(this.props.backImgList) }
                </Menu>
            </Sider>
        )
    }
}
            
const mapStateToProps = (state) => ({ backImgList:state.equipmentPage.backImgList});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    setIndex: dispatch.equipmentPage.setState,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(NewSider));